<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" href="hallo.css" />
    <link rel="stylesheet" href="fontawesome/css/font-awesome.css" charset="utf-8" />
<!--[if lt IE 9]>
    <link rel="stylesheet" href="fontawesome/css/font-awesome-ie7.css" charset="utf-8" />
<![endif]-->
    <script src="../bower_components/jquery/jquery.js"></script>
    <script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
    <script src="../bower_components/rangy-official/rangy-core.js"></script>
    <script src="../dist/hallo.js"></script>
    <script src="../bower_components/jquery-htmlclean/jquery.htmlClean.js"></script>
    <script src="hallo.js"></script>
    <title>Hallo example</title>
  </head>
  <body>
    <p id="modified">Editables have not been modified</p>

    <div class="editable">
      <p>Hello <a href="http://test.de/">World</a> Test 123</p>
    </div>

    <script>
      jQuery(function() {
        jQuery('.editable').hallo({
          plugins: {
            'halloformat': {},
            'halloblock': {},
            'hallojustify': {},
            'hallolists': {},
            'hallolink': {},
            'halloreundo': {},
            'hallocleanhtml': {
              format: false,
              allowedTags: ['p', 'em', 'strong', 'br', 'div', 'ol', 'ul', 'li', 'a'],
              allowedAttributes: ['style']
            }
          },
          editable: true
        });
        jQuery('.editable').bind('hallomodified', function(event, data) {
            jQuery('#modified').html("Editables modified");
        });
        jQuery('.editable').bind('halloselected', function(event, data) {
            jQuery('#modified').html("Selection made");
        });
        jQuery('.editable').bind('hallounselected', function(event, data) {
            jQuery('#modified').html("Selection removed");
        });
        jQuery('.editable').bind('hallorestored', function(event, data) {
            jQuery('#modified').html("restored");
        });
      });
    </script>
  </body>
</html>
